<template>
  <el-container style="display: flex; justify-content: center; align-items: center">
    <el-tabs type="border-card">
      <el-tab-pane label="职务-人物列表" style="height: 600px; width: 600px; overflow: auto">
        <span slot="label"><i class="el-icon-user-solid"></i>职务-人员列表</span>
        <div>
          <el-form :model="position" :inline="true" align="center">
            <el-form-item label="职务名" prop="positionName">
              <el-input placeholder="请输入职务名" v-model="position.positionName" autocomplete="off" style="width: 70%"
                :clearable="true" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getPoisitionList()">搜索</el-button>
              <!-- <el-button type="info" icon="el-icon-refresh" @click="clearSelection()">重置</el-button> -->
            </el-form-item>
          </el-form>
          <el-table :border="true" :highlight-current-row="true" :data="positionList" stripe>
            <el-table-column type="expand" prop="employeeList">
              <template slot-scope="props">
                <el-table :border="true" :highlight-current-row="true" :data="props.row.employeeList"
                  style="border: 1.5px solid #ccc">
                  <el-table-column prop="employeeName" label="员工名" width="width">
                    <template slot-scope="props">

                      <el-tag><i class="el-icon-user-solid">{{ props.row.employeeName }} </i> </el-tag>

                    </template>
                  </el-table-column>
                  <el-table-column prop="employeeId" label="员工Id" width="width">
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>

            <el-table-column label="职务名" prop="positionName">
              <template slot-scope="props">
                <el-tag type="success">
                  <i class="el-icon-s-goods">
                    {{ props.row.positionName }}
                  </i>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="职务Id" prop="positionId">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="人员-职务列表" style="height: 600px; width: 600px; overflow: auto">
        <span slot="label"><i class="el-icon-s-goods"></i> 人员-职务列表</span>
        <div>
          <el-form :model="employee" :inline="true" align="center" style="">
            <el-form-item label="人员姓名" prop="employeeName">
              <el-input placeholder="请输入人员姓名" v-model="employee.employeeName" autocomplete="off" style="width: 70%"
                :clearable="true" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getEmployeeList()">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-table :border="true" :highlight-current-row="true" :data="employeeList" stripe>
            <el-table-column type="expand" prop="positionList">

              <template slot-scope="props">
                <el-table :border="true" :highlight-current-row="true" :data="props.row.positionList"
                  style="border: 1.5px solid #ccc">
                  <el-table-column prop="positionName" label="职务名" width="width">
                    <template slot-scope="props">
                      <el-tag type="success">
                        <i class="el-icon-s-goods">
                          {{ props.row.positionName }}
                        </i>
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="positionId" label="职务Id" width="width">
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>

            <el-table-column label="人员姓名" prop="employeeName">
              <template slot-scope="props">
                <el-tag><i class="el-icon-user-solid">{{ props.row.employeeName }} </i> </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="人员Id" prop="employeeId">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>
<script>
export default {
  name: "PositionAndEmployee",
  data() {
    return {
      positionList: [],
      employeeList: [],
      position: {
        positionId: "",
        positionName: "",
        employeeList: [],
      },
      employee: {
        employeeId: "",
        employeeName: "",
        positionList: [],
      },
    };
  },
  mounted: function () {
    this.getPoisitionList();
    this.getEmployeeList();
  },
  methods: {
    getPoisitionList: function () {
      this.$axios
        .post(
          "http://127.0.0.1:8082/positionAndEmployee/postEmployeeByPosition",
          this.position
        )
        .then((response) => {
          console.log("职务列表！！！！", response.data.data);
          this.positionList = response.data.data;
        });
    },
    getEmployeeList: function () {
      this.$axios
        .post(
          "http://127.0.0.1:8082/positionAndEmployee/postPositionByEmployee",
          this.employee
        )
        .then((response) => {
          console.log("人员列表！！！！", response.data.data);
          this.employeeList = response.data.data;
        });
    },
  },
};
</script>
<style scoped></style>
